<template>
  <div>
    <div class="detail-box">
      <div class="toAnswer" v-if="showInfo">
        <p>为您量身推荐职位，需要您完成下面的测试，看看哪些职位更加符合您！</p>
        <el-button class="go" @click="goToAnswer">前往</el-button>
      </div>
      <el-button v-if="showBtn" type="primary" @click="back" icon="el-icon-back">返回</el-button>
      <test-topic v-if="showBtn"></test-topic>
    </div>
  </div>
</template>
<script>
import TestTopic from "./components/TestTopic";
export default {
  name: "JobDetail",
  data () {
    return {
      showBtn:false,
      showInfo:true
    }
  },
  components: {
    TestTopic
  },
  methods: {
    goToAnswer(){
      this.showBtn = true;
      this.showInfo=false;

    },
    back() {
      this.$confirm("是否保存操作?", "提示", {
        confirmButtonText: "保存",
        cancelButtonText: "不保存",
        type: "warning"
      })
        .then(() => {
          // 成功要做的事情
          this.$message({
            type: "success",
            message: "保存成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消保存"
          });
        });
    }
  },
  mounted() {
    // this.getTestInfo();
  }
};
</script>
<style lang="stylus" scoped>
.detail-box {
  text-align: right;
  margin-right: 332px;
  .toAnswer{
    padding-top:100px;
    margin-left:260px;
    height:600px;
    width:1400px;
    background :#F5F5F5;
    text-align: center;
    p{
      margin-bottom:360px;
    }
     .go{
      background-color:#FACE39;
      width:200px;
      padding :15px;
      font-size:20px;
      font-weight:600;
    }
  }
}
</style>
